
<template>
  <modal :visible="visible" position="bottom">
    <view class="new-register-join-member-modal">
      <image
        @click="onCancel"
        src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/X.png"
        class="top-close"
        mode="widthFix"
      />
      <view class="content">
        <view class="title">加入会员享专属权益</view>
        <image
          class="model-icon"
          src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png"
          mode="widthFix"
        ></image> 
        <view class="icon-list">
          <view
            class="icon-item"
            v-for="(item, index) in iconList"
            :key="index"
          >
            <image :src="item.url" mode="widthFix"></image>
            <view class="icon-text">{{ item.text }}</view>
          </view>
        </view>
        <button
          class="bind"
          open-type="getPhoneNumber"
          @getphonenumber="onGetPhoneNumber($event, 'binding')"
        >
          我已注册会员，立即绑定
        </button>
        <!-- @click.stop="onRegister" -->
        <button
          class="isregistry"
          open-type="getPhoneNumber"
          @getphonenumber="onGetPhoneNumber($event, 'register')"
        >
          立即注册
        </button>
      </view>
    </view>
    <!-- <view class="dialog" v-if="true">
      <view class="dialog-bg">
        <image
          @click="closeDialog"
          src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/X.png"
          class="top-close"
          mode="widthFix"
        />
        <view class="dialog-content">
          <view class="dialog-text">
            <view class="dialog-title">恭喜你成功入会</view>
            <image
              class="model-icon"
              src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png"
              mode="widthFix"
            ></image>
            <view class="text" style="width: 526rpx; padding: 0 94rpx"
              >前往联系您的专属客户代表 探索更多麦卡伦佳作</view
            >
          </view>
        </view>
      </view>
    </view> -->
  </modal>
</template>
<script>
import modal from "../modal/modal.vue";
import registerController from "./RegisterController";
import RegisterTracker from "./RegisterTracker";
import tip from "@/utils/tip";
import api from "@/api/api";
import { CUSTOMER_INFO } from "@/utils/constant";
export default {
  name: "new-register-join-member-modal",
  props: {
    // 使用页面
    location: {
      type: String,
      default: "home",
    },
  },
  components: {
    modal,
  },
  data() {
    return {
      visible: false,
      useInfo: {
        mobile: "", //手机号
        isActive: "", //1 会员 0 新用户
      },
      iconList: [
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Icons@2x.png",
          text: "专享购买",
        },
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Icons@2x (1).png",
          text: "专属福利",
        },
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Icons@2x (2).png",
          text: "品牌特邀",
        },
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Icons@2x (3).png",
          text: "新品通知",
        },
      ],
    };
  },
  methods: {
    async getUseInfo() {
      let that = this;
      let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
      that.useInfo.mobile = customerInfo.mobile;
      let jwt = customerInfo.jwt;
      that.jwt = jwt;
      await that.getMemberDetail(jwt);
    },
    onConfirm(type) {
      if (type === "NEW_USER") {
        RegisterTracker.authViprules({
          btnName: "立即加入",
          registerType: "NORMAL",
        });
        this.$commonSensors.commonPopupClick(
          "RegisterPopupClick",
          "入会弹窗",
          "立即加入"
        );
        // this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': '立即加入'})
      } else {
        RegisterTracker.bindVip();
        getApp().commonssPopupTrack("PopupClick", {
          popup_type: "会员注册/绑定",
          popup_name: "入会弹窗",
          button_name: "我已注册会员，立即绑定",
        });
        this.$commonSensors.commonPopupClick(
          "RegisterPopupClick",
          "入会弹窗",
          "立即绑定"
        );
        // this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': '立即绑定'})
      }
      tip.plainText("请确认您已阅读并同意会员规则");
    },
    // 授权
    // 新用户
    // 立即注册-》验证手机号-》空注册页填写用户信息->提交信息->入会成功提示
    //  会员
    // 立即注册-》验证手机号-》回写注册页填写用户信息->提交信息->绑定成功提示

    // 老会员点击注册 授权的手机号与当前手机号不一致 -》 立即入会弹窗-》回写注册页填写用户信息-》入会成功
    //
    async onGetPhoneNumber(e, type) {
      let that = this;
      try {
        await this.getUseInfo();
      } catch (error) {
        
      }
      const app = getApp();
      const res = await registerController.getPhoneNumberData(e, {
        location: this.location,
      });
      this.close();
      // 验证手机
      if (res.success) {
        const { phoneNumber } = res.data;
        const phoneNumberReg = /^1\d{10}$/;
        if (!phoneNumberReg.test(phoneNumber)) {
          uni.hideLoading();
          this.$emit("confirm", { messageModalCode: "OVERSEAS_MEMBER" });
          return;
        }

        const userInfo = await registerController.newUserCheck(phoneNumber);
        if (
          userInfo.joinMemberData&&userInfo.joinMemberData.isActive == "Active" &&
          userInfo.registerSuccess &&
          phoneNumber != this.useInfo.mobile
        ) {
          console.log('授权的手机号是会员 并且手机号和授权的不一致')

          //  授权的手机号是会员 并且手机号和授权的不一致
        } else if (
          userInfo.joinMemberData&&userInfo.joinMemberData.isActive != "Active" &&
          phoneNumber != this.useInfo.mobile
        ) {
          //  授权的手机号不是会员 并且手机号和授权的不一致
          console.log('授权的手机号不是会员 并且手机号和授权的不一致')
        }

        //当前是老会员点击注册 授权的手机号与当前手机号不一致
        if (
          res.data.phoneNumber != this.useInfo.mobile &&
          this.useInfo.isActive == 1
        ) {
          uni.hideLoading();
          this.$emit("registerBtn", res.data.phoneNumber);
          return;
        } else if (this.useInfo.isActive == 0) {
          // 新用户
          uni.hideLoading();
          // 跳转注册页
          uni.navigateTo({
            url: `/pages/customer/exclusiveRegister?phoneNumber=${phoneNumber}&isDialog=0&userState=${type}&isActive=0`,
          });
        } else if (this.useInfo.isActive == 1) {
          //  老会员点击注册
          uni.hideLoading();
          // 跳转注册页
          uni.navigateTo({
            url: `/pages/customer/exclusiveRegister?phoneNumber=${phoneNumber}&isDialog=1&userState=${type}&isActive=1`,
          });
        }
      } else {
        uni.hideLoading();
      }
    },
    /**
     * 判断是否是会员
     *
     * @param jwt
     * @return {Promise<void>}
     */
    getMemberDetail: async function (jwt) {
      let that = this;
      const memberDetailsResult = await api.getMemberDetails({
        header: {
          jwt: jwt,
        },
      });
      if (memberDetailsResult.code == 1000) {
        let memberDetails = memberDetailsResult.data;
        if (memberDetails.isActive == "Active") {
          that.useInfo.isActive = 1;
          // 是会员 跳转注册页
          // uni.navigateTo({
          //   url: "/pages/customer/exclusiveRegister",
          // });
        } else {
          that.useInfo.isActive = 0;
        }
      }
    },
    // 立即注册
    async onRegister() {
      if (this.onTip("立即注册")) {
        const res = await registerController.register();
        if (res.registerSuccess) {
          const userCheckResult = await registerController.repeatUserCheck();
          // 这里强制变更模板(接口只能查出绑定成功, 期望是入会成功)
          if (userCheckResult.messageModalCode === "SUCCESS_BIND") {
            userCheckResult.messageModalCode = "SUCCESS_JOIN";
          }
          Object.assign(res, userCheckResult);
          getApp().commonssPopupTrack(
            "PopupExposure",
            {},
            "NORMAL",
            "SUCCESS_JOIN"
          );
          this.close();
          this.$emit("recheckUser", res);
        }
        if (res.joinMemberSuccess) {
          this.$emit("registerSuccess", res);
        }
      }
    },
    onTip(btnName) {
      RegisterTracker.authViprules({
        btnName: btnName,
        registerType: "NORMAL",
      });
      // if (!this.ruleCheck) {
      //   tip.plainText("请确认您已阅读并同意会员规则");
      //   return false;
      // }
      return true;
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    onCancel() {
      let trackParams = {
        c_age_answer: "拒绝",
      };
      RegisterTracker.authGate({
        trackParams,
        location: this.location,
        registerType: this.tsActId ? "TARGET_SALES" : "NORMAL",
      });
      this.$commonSensors.popupEvent("PopupClick", {
        popup_type: "用户授权",
        popup_name: "18岁弹窗",
        button_name: "关闭",
      });
      // 关闭小程序
      // wx.exitMiniProgram({
      //   complete: (com) => {},
      // });
      this.close();
    },
  },
};
</script>
<style lang="scss" scoped>
.new-register-join-member-modal {
  width: 750rpx;
  height: 874rpx;
  background: #fff;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  position: relative;
  padding: 0 48rpx;
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .model-icon {
      width: 182rpx;
      height: 57rpx;
      padding-top: 20rpx;
    }
    .icon-list {
      margin-top: 68rpx;
      width: 622rpx;
      height: 152rpx;
      display: flex;
      flex-direction: row;
      // flex-wrap: wrap;
      justify-content: space-between;

      .icon-item {
        text-align: center;
        padding-top: 20rpx;
        font-family: NotoSansSC-Regular;
        image {
          display: block;
          width: 96rpx;
          height: 96rpx;
        }

        .icon-text {
          font-size: 24rpx;
          color: #757575;
          margin-top: 24rpx;
          font-family: "NotoSansSC-Regular";
        }
      }
    }
    .isregistry {
      width: 654rpx;
      height: 80rpx;
      border-radius: 48px 16px 48px 48px;
      text-align: center;
      line-height: 80rpx;
      font-family: NotoSansSC-Medium;
    }
    .bind {
      font-size: 24rpx;
      font-weight: 400;
      height: 40rpx;
      line-height: 40rpx;
      margin-bottom: 64rpx;
      margin-top: 136rpx;
      font-family: NotoSansSC-Regular;
      border-width: 0px 0px 2rpx 0px;
      border-style: solid;
      border-color: #000000;
      color: #000;
      background-color: transparent;
      padding: 0;
    }
  }
  .title {
    margin-top: 142rpx;
    font-size: 48rpx;
    font-weight: 500;
    font-family: "NotoSansSC-Medium";
    color: #000000;
  }
  button,
  .btn,
  .btnStyle {
    background-color: #cb171a;
  }
}
.top-close {
  position: absolute;
  right: 48rpx;
  top: 64rpx;
  width: 32rpx;
  height: 32rpx;
}
.dialog-bg {
  height: 492rpx;
  width: 654rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  position: relative;

  .top-close {
    position: absolute;
    right: 48rpx;
    top: 64rpx;
    width: 32rpx;
    height: 32rpx;
  }

  .mcl-guanbi1 {
    text-align: right;
    font-size: 18px;
    font-weight: 600;
    padding: 12px;
  }

  .dialog-text {
    text-align: center;

    .dialog-title {
      font-size: 36rpx;
      font-weight: 500;
      margin-bottom: 20rpx;
      font-family: NotoSansSC-Regular;
    }

    .model-icon {
      width: 182rpx;
      height: 56rpx;
      margin-bottom: 20rpx;
    }
  }

  .title {
    padding-top: 40rpx;
    text-align: center;
    // text-decoration: underline;
    font-size: 16px;
    font-weight: 800;
    font-family: NotoSansSC-Medium;
  }

  .btn {
    display: inline-block;
    background: #000000;
    text-align: center;
    padding: 16rpx 70rpx;
  }

  .text {
    color: #757575;
    padding: 0 64rpx;
    text-align: center;
    font-size: 28rpx;
    line-height: 48rpx;
  }
}
</style>